import React, { Component } from 'react';
import Swiper from 'react-native-swiper';
import { AppRegistry, Text, TextInput, View ,FlatList,TouchableOpacity,Image,Dimensions,ScrollView,TouchableHighlight} from 'react-native';
var {height, width} = Dimensions.get('window');
import ScrollableTabView,{DefaultTabBar,ScrollableTabBar}  from 'react-native-scrollable-tab-view';
export default class Cangpinguan extends Component {
  constructor(props) {
    super(props);
    navigation = props.navigation; 
    this.state = {
        dataSource:[
            {'id':1,'name':"磁山文化红陶盂",'shidai':"元代",'zuozhe':"故宫·学术",'jianjie':"办“故宫藏传佛教文物精品展”一期（2011年）、二期（2013年），受到业内外人士的普遍好评"},
            {'id':2,'name':"磁山文化红陶盂",'shidai':"元代",'zuozhe':"故宫·学术",'jianjie':"办“故宫藏传佛教文物精品展”一期（2011年）、二期（2013年），受到业内外人士的普遍好评"},
            {'id':3,'name':"磁山文化红陶盂",'shidai':"元代",'zuozhe':"故宫·学术",'jianjie':"办“故宫藏传佛教文物精品展”一期（2011年）、二期（2013年），受到业内外人士的普遍好评"},
            {'id':4,'name':"磁山文化红陶盂",'shidai':"元代",'zuozhe':"故宫·学术",'jianjie':"办“故宫藏传佛教文物精品展”一期（2011年）、二期（2013年），受到业内外人士的普遍好评"},
        ],
        tabs:1,

    };
  }
    static navigationOptions=({navigation}) => ({
        headerTitle: '学术详情',
        headerTitleStyle:{
            alignSelf:'center',
            // width:width
        },
        headerTintColor:'burlywood',
        
      });
      _keyExtractor = (item, index) => item.id;
      _renderItem({item,index}){
        const { navigate } = this.props.navigation;
          return(
            <TouchableOpacity onPress={() => navigate('ProfileD')} activeOpacity={0.3}>
            <View style={{width:width*0.9,height:60,paddingTop:10,flex: 1, flexDirection: 'column',justifyContent: 'flex-start',alignSelf:'center',marginBottom:10}}>
                <View style={{flexDirection:'column',justifyContent:'flex-start',paddingLeft:10}}>
                <Text style={{fontWeight:'',}}> {item.name}</Text>
                <Text style={{fontWeight:'',}}> 时代：{item.shidai}</Text>
                </View>
                <View style={{width:width*0.9,height:1,backgroundColor:'#CCCCCC',marginTop:20}}>
                </View>
            </View>
            </TouchableOpacity>
          )
      };
render() {
  const { navigate } = this.props.navigation;
        return (
          <View style={{flexDirection: 'column',flex:1,backgroundColor:'white'}}>
          <ScrollView style={{flex:1,height:150}}>
          <Swiper height={150} showsButtons={false} autoplay={true}
            activeDot={<View style={{backgroundColor: 'rgba(255,255,255,0.8)', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}>
            <TouchableHighlight onPress={() => navigate('ProfileD',{user:'行超'})}>
              <View style={{}}>
              <Image style={{}} source={require("./img/day1.png")}></Image>
                <Text style={{}}>Day1: Timer</Text>
              </View>
            </TouchableHighlight>
            <TouchableHighlight onPress={() => navigate('ProfileD',{user:'行超'})}>
              <View style={{}}>
              <Image style={{}} source={require("./img/day2.png")}></Image>
                <Text style={{}}>Day2: Weather</Text>
              </View>
            </TouchableHighlight>
            <TouchableHighlight onPress={() => navigate('ProfileD',{user:'行超'})}>
            <View style={{}}>
            <Image style={{}} source={require("./img/day1.png")}></Image>
              <Text style={{}}>Day2: Weather</Text>
            </View>
          </TouchableHighlight>
          <TouchableHighlight onPress={() => navigate('ProfileD',{user:'行超'})}>
          <View style={{}}>
          <Image style={{}} source={require("./img/day2.png")}></Image>
            <Text style={{}}>Day2: Weather</Text>
          </View>
        </TouchableHighlight>
        </Swiper>
        </ScrollView>
        <ScrollableTabView
        style={{flex:2,}}
        tabBarPosition='top'//tabBarPosition默认top  位于屏幕顶部   bottom位于屏幕底部  overlayTop悬浮在顶部
        initialPage={0} //初始化时被选中的Tab下标，默认是0
        locked={false}//表示手指是否能拖动视图  默认false  true则不能拖动,只可点击
        renderTabBar={() => <ScrollableTabBar />}
        tabBarUnderlineStyle={{backgroundColor: 'black'}}//设置DefaultTabBar和ScrollableTabBarTab选中时下方横线的颜色
        tabBarBackgroundColor='#FFFFFF'//设置整个Tab这一栏的背景颜色
        tabBarActiveTextColor='black'//设置选中Tab的文字颜色
        tabBarInactiveTextColor='#CCCCCC'//设置未选中Tab的文字颜色
        tabBarTextStyle={{fontSize: 16,fontWeight:''}}//设置Tab文字的样式
        onChangeTab={(obj) => {//Tab切换之后会触发此方法
          console.log('index:' + obj.i);
        }}
        onScroll={(postion) => {  //视图正在滑动的时候触发此方法
          // float类型 [0, tab数量-1]
          console.log('scroll position:' + postion);
        }}
    >
        <View tabLabel='全部' style={{backgroundColor:'white'}}>
        <FlatList 
        data={this.state.dataSource}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem.bind(this)}>
        </FlatList>
        </View>
        <View tabLabel='陶瓷'>
        <FlatList 
        data={this.state.dataSource}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem.bind(this)}>
        </FlatList>
        </View>
        <View tabLabel='绘画'>
        <FlatList 
        data={this.state.dataSource}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem.bind(this)}>
        </FlatList>
        </View>
        <View tabLabel='书法'>
        <FlatList 
        data={this.state.dataSource}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem.bind(this)}>
        </FlatList>
        </View>
        <View tabLabel='织绣'>
        <FlatList 
        data={this.state.dataSource}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem.bind(this)}>
        </FlatList>
        </View>
        <View tabLabel='珐琅'>
        <FlatList 
        data={this.state.dataSource}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem.bind(this)}>
        </FlatList>
        </View>
    </ScrollableTabView>
      </View>

         )
  
       
     }
}



// AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);